<template>
  <div class="welcome-wrap">
    <div class="module-wrap">
      <div class="module-left">
        <img src="~@/assets/logo.png" alt="">
        <p style="color: #fff;font-size:16px;margin-top:20px;">欢迎来到</p>
        <p style="color: #29abe2;font-size:22px;">
          贵阳市住房保障系统一体化管理平台
        </p>
        <p style="color: #fff;font-size:16px;">点击右边菜单进入</p>
      </div>
      <div class="module-right">
        <div class="module-list">
          <router-link to="/login">
            <div class="module-item access">
              <img src="~@/assets/images/zr.png" alt="贵阳准入系统">
              <p>贵阳准入系统</p>
            </div>
          </router-link>
          <a href="http://222.85.201.115:8027/">
            <div class="module-item secure-house">
              <img src="~@/assets/images/ajf.png" alt="安居房管理系统">
              <p>安居房管理系统</p>
            </div>
          </a>
        </div>
        <div class="module-list">
          <router-link to="/login">
            <div class="module-item follow-up">
              <img src="~@/assets/images/hxgl.png" alt="后续管理系统">
              <p>后续管理系统</p>
            </div>
          </router-link>
          <a href="http://222.85.201.115:8029/" >
            <div class="module-item guaranteed-rent">
              <img src="~@/assets/images/bzf.png" alt="保租房管理系统">
              <p>保租房管理系统</p>
            </div>
          </a>
        </div>
        <router-link to="/login">
          <div class="module-list self-filing">
            <img src="~@/assets/images/zxba.png" alt="自行备案系统">
            <p>自行备案系统</p>
          </div>
        </router-link>
      </div>
    </div>
    <div class="foot-wrap">
      <span>制作单位：贵阳佳智软件开发有限公司</span>
      <span>技术服务热线：0851-85865358</span>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
  .welcome-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // min-width: max-content;
    background: url(~@/assets/images/welcome.jpg) no-repeat;
    background-position: center;
    background-size: 100% 100%;
    .module-wrap {
      // width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .module-left {
        // width: 500px;
        margin-right: 120px;
      }
      .module-right {
        display: flex;
        .module-list {
          color: #fff;
          margin-right: 12px;
          a {
            color: #fff;
          }
          .module-item {
            width: 225px;
            height: 225px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 10px;
            padding: 40px;
            img {
              max-width: 120px;
              height: 100px;
              vertical-align: middle;
            }
            p {
              margin-top: 20px;
            }
          }
          .access {
            background-color: rgba(2, 141, 198, .8);
          }
          .follow-up {
            background-color: rgba(2, 147, 143, .8);
          }
          .secure-house {
            background-color: rgba(2, 131, 65, .8);
          }
          .guaranteed-rent {
            background-color: rgba(119, 171, 65, .8);
          }
        }
        .self-filing {
          width: 235px;
          height: 460px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: rgba(21, 38, 121, .8);
          border-radius: 8px;
          text-align: center;
          p {
            margin-top: 30px;
          }
        }
      }
    }
    .foot-wrap {
      color: #fff;
      text-align: center;
      font-size: 14px;
      position: relative;
      bottom: -160px;
      & > span:nth-child(2) {
        margin-left: 60px;
      }
    }
  }
</style>
